<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>product</title>
    <link rel="stylesheet" type="text/css"
          href="/bootstrap/bootstrap.4.1.0.css">
    <script src="/bootstrap/jquery.3.2.1.min.js"></script>
    <script src="/bootstrap/popper.12.5.min.js"></script>
    <script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="/vue/Vue.js"></script>
    <script src="/vue/axios.js"></script>
</head>
<body>
    <div id="all" class="container">
        <div v-for="product in products" style="float: left; margin-left: 30px">
            <img :src="product.images[0]" style="width: 100px;height: 150px" @click="detail(product)">
           <div> <label>￥:</label>{{product.price}}</div>
            <div>{{product.pname}}</div>
            <div>{{product.count}}</div>
            <div>{{product.detail}}</div>
        </div>
    </div>
<script>
    new Vue({
        el:"#all",
        data:{
            products:[],
        },
        mounted(){
            axios.get("/product/all")
                .then(
                    res => {
                        this.products = res.data;
                    }
                )
        },
        methods:{
            detail:function(product){
                window.location.href="detail.html?pid="+product.pid;
            }
        }
    })
</script>
</body>
</html>